<template>
  <div class="fish-detail-container">
    <div v-if="loading" class="fish-detail-loading">
      <el-skeleton :rows="10" animated />
    </div>

    <template v-else-if="fish">
      <div class="fish-detail-header">
        <el-button class="fish-detail-back" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        <div class="fish-detail-actions">
          <el-button
            class="fish-detail-bookmark"
            :icon="isBookmarked ? 'el-icon-star-on' : 'el-icon-star-off'"
            :class="{ active: isBookmarked }"
            @click="toggleBookmark"
          >
            {{ isBookmarked ? '已收藏' : '收藏' }}
          </el-button>
          <el-button class="fish-detail-share" icon="el-icon-share">分享</el-button>
        </div>
      </div>

      <div class="fish-detail-content">
        <div class="fish-detail-gallery">
          <div class="fish-detail-main-image">
            <img :src="fish.image" :alt="fish.name" />
          </div>
          <div class="fish-detail-thumbnails" v-if="fish.gallery && fish.gallery.length > 0">
            <div
              v-for="(img, index) in fish.gallery"
              :key="index"
              class="fish-detail-thumbnail"
              :class="{ active: selectedImage === index }"
              @click="selectImage(index)"
            >
              <img :src="img" :alt="`${fish.name} - ${index + 1}`" />
            </div>
          </div>
        </div>

        <div class="fish-detail-info">
          <h1 class="fish-detail-title">{{ fish.name }}</h1>

          <div class="fish-detail-tags">
            <span v-for="(tag, index) in fish.tags" :key="index" class="fish-detail-tag">
              {{ tag }}
            </span>
          </div>

          <div class="fish-detail-price">
            <span class="fish-detail-price-label">价格：</span>
            <span class="fish-detail-price-value">¥{{ fish.price }}</span>
          </div>

          <div class="fish-detail-description">
            <h3 class="fish-detail-section-title">描述</h3>
            <p>{{ fish.description }}</p>
          </div>

          <div class="fish-detail-specifications">
            <h3 class="fish-detail-section-title">规格参数</h3>
            <ul class="fish-detail-specs-list">
              <li v-for="(spec, key) in fish.specifications" :key="key" class="fish-detail-spec-item">
                <span class="fish-detail-spec-label">{{ key }}：</span>
                <span class="fish-detail-spec-value">{{ spec }}</span>
              </li>
            </ul>
          </div>

          <div class="fish-detail-care">
            <h3 class="fish-detail-section-title">饲养指南</h3>
            <p>{{ fish.careInstructions }}</p>
          </div>

          <div class="fish-detail-buttons">
            <el-button type="primary" class="fish-detail-buy-button">立即购买</el-button>
            <el-button class="fish-detail-cart-button">加入购物车</el-button>
          </div>
        </div>
      </div>

      <div class="fish-detail-related">
        <h2 class="fish-detail-related-title">相关推荐</h2>
        <div class="fish-detail-related-grid">
          <div v-for="relatedFish in relatedFishes" :key="relatedFish.id" class="fish-detail-related-item">
            <FishCard :fish="relatedFish" @click="goToFishDetail(relatedFish.id)" />
          </div>
        </div>
      </div>
    </template>

    <div v-else class="fish-detail-not-found">
      <img src="@/assets/figma-images/figma-blue.svg" alt="未找到" class="fish-detail-not-found-icon" />
      <h2>未找到鱼类信息</h2>
      <p>抱歉，未能找到您请求的鱼类信息</p>
      <el-button @click="goBack">返回列表</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import FishCard from '@/components/FishCard/index.vue';

  interface Fish {
    id: string;
    name: string;
    description: string;
    image: string;
    gallery?: string[];
    price: number;
    tags: string[];
    specifications: Record<string, string>;
    careInstructions: string;
    categoryId: string;
    isBookmarked?: boolean;
  }

  const props = defineProps<{
    id: string;
  }>();

  const router = useRouter();
  const loading = ref(true);
  const fish = ref<Fish | null>(null);
  const isBookmarked = ref(false);
  const selectedImage = ref(0);
  const relatedFishes = ref<Fish[]>([]);

  // 模拟数据加载
  onMounted(async () => {
    loading.value = true;

    // 模拟API请求延迟
    setTimeout(() => {
      // 模拟单个鱼类数据
      fish.value = {
        id: props.id,
        name: `观赏鱼 ${props.id.replace('fish-', '')}`,
        description:
          '这是一种美丽的观赏鱼，它拥有鲜艳的色彩和优雅的游姿。此鱼原产于亚洲热带水域，性格温和，适合新手饲养者。它们喜欢群居，建议至少养5-6条。这种鱼对水质要求不高，但仍需保持水质清洁和稳定的水温。',
        image: `https://picsum.photos/800/600?random=${props.id}`,
        gallery: [
          `https://picsum.photos/800/600?random=${parseInt(props.id.replace('fish-', '')) + 100}`,
          `https://picsum.photos/800/600?random=${parseInt(props.id.replace('fish-', '')) + 200}`,
          `https://picsum.photos/800/600?random=${parseInt(props.id.replace('fish-', '')) + 300}`,
        ],
        price: Math.floor(Math.random() * 1000) + 100,
        tags: ['热带', '和平', '容易饲养'],
        specifications: {
          体长: '3-5cm',
          寿命: '3-5年',
          适宜水温: '22-28℃',
          适宜pH值: '6.5-7.5',
          饲养难度: '简单',
          饲养环境: '淡水',
          饲养空间: '最小20L水族箱',
        },
        careInstructions:
          '这种鱼适合在中小型水族箱中饲养，水温应保持在22-28℃之间，pH值在6.5-7.5之间。每周需要更换25-30%的水，以保持水质清洁。喂食应适量，每天1-2次，可喂食优质鱼片、冻干饵料或活体小虫。',
        categoryId: ['freshwater', 'saltwater', 'coldwater', 'tropical'][Math.floor(Math.random() * 4)],
        isBookmarked: Math.random() > 0.7,
      };

      isBookmarked.value = !!fish.value?.isBookmarked;

      // 模拟相关鱼类
      relatedFishes.value = Array.from({ length: 4 }, (_, index) => ({
        id: `fish-${parseInt(props.id.replace('fish-', '')) + index + 1}`,
        name: `相关观赏鱼 ${index + 1}`,
        description: '这是一种与当前鱼类相关的观赏鱼品种，有着相似的习性和饲养方式。',
        image: `https://picsum.photos/500/300?random=${parseInt(props.id.replace('fish-', '')) + index + 10}`,
        price: Math.floor(Math.random() * 1000) + 100,
        tags: ['热带', '和平', '容易饲养'].slice(0, Math.floor(Math.random() * 3) + 1),
        categoryId: fish.value?.categoryId || 'freshwater',
        specifications: {},
        careInstructions: '',
      }));

      loading.value = false;
    }, 1000);
  });

  // 返回上一页
  const goBack = () => {
    router.back();
  };

  // 切换收藏状态
  const toggleBookmark = () => {
    isBookmarked.value = !isBookmarked.value;
    // 实际项目中，这里应该调用API来保存收藏状态
  };

  // 选择图片
  const selectImage = (index: number) => {
    selectedImage.value = index;
    if (fish.value && fish.value.gallery && fish.value.gallery[index]) {
      fish.value.image = fish.value.gallery[index];
    }
  };

  // 跳转到另一个鱼类详情
  const goToFishDetail = (id: string) => {
    router.push(`/fish/detail/${id}`);
  };

  // 暴露组件方法
  defineExpose({
    goBack,
    toggleBookmark,
    selectImage,
    goToFishDetail,
  });
</script>

<style lang="less" scoped>
  .fish-detail {
    &-container {
      padding: 30px 0;
      max-width: 1200px;
      margin: 0 auto;
    }

    &-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    &-back {
      color: #403a7a;
      border-color: #403a7a;

      &:hover {
        background-color: #403a7a;
        color: white;
      }
    }

    &-actions {
      display: flex;
      gap: 15px;
    }

    &-bookmark,
    &-share {
      color: #403a7a;
      border-color: #403a7a;

      &:hover {
        background-color: #403a7a;
        color: white;
      }

      &.active {
        background-color: #403a7a;
        color: white;
      }
    }

    &-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 60px;

      @media (width <= 768px) {
        grid-template-columns: 1fr;
      }
    }

    &-gallery {
      position: relative;
    }

    &-main-image {
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: 0 10px 30px rgb(0 0 0 / 10%);

      img {
        width: 100%;
        height: 400px;
        object-fit: cover;
      }
    }

    &-thumbnails {
      display: flex;
      gap: 10px;
    }

    &-thumbnail {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.3s ease;

      &:hover {
        opacity: 0.9;
      }

      &.active {
        opacity: 1;
        box-shadow: 0 0 0 2px #403a7a;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    &-info {
      display: flex;
      flex-direction: column;
    }

    &-title {
      font-size: 32px;
      font-weight: 700;
      color: #403a7a;
      margin: 0 0 15px;
    }

    &-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }

    &-tag {
      padding: 6px 12px;
      border-radius: 15px;
      background-color: #e2f3fe;
      color: #403a7a;
      font-size: 14px;
      font-weight: 500;
    }

    &-price {
      margin-bottom: 25px;

      &-label {
        font-size: 16px;
        color: #666;
      }

      &-value {
        font-size: 24px;
        font-weight: 700;
        color: #403a7a;
      }
    }

    &-section-title {
      font-size: 18px;
      font-weight: 600;
      color: #403a7a;
      margin: 0 0 15px;
    }

    &-description {
      margin-bottom: 25px;

      p {
        color: #666;
        line-height: 1.6;
      }
    }

    &-specifications {
      margin-bottom: 25px;
    }

    &-specs-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    &-spec-item {
      display: flex;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    &-spec-label {
      width: 100px;
      color: #666;
    }

    &-spec-value {
      color: #333;
      font-weight: 500;
    }

    &-care {
      margin-bottom: 25px;

      p {
        color: #666;
        line-height: 1.6;
      }
    }

    &-buttons {
      display: flex;
      gap: 15px;
      margin-top: auto;
    }

    &-buy-button {
      flex: 1;
      background-color: #403a7a;
      border-color: #403a7a;

      &:hover,
      &:focus {
        background-color: darken(#403a7a, 10%);
        border-color: darken(#403a7a, 10%);
      }
    }

    &-cart-button {
      flex: 1;
      color: #403a7a;
      border-color: #403a7a;

      &:hover {
        background-color: #403a7a;
        color: white;
      }
    }

    &-related {
      margin-top: 60px;
    }

    &-related-title {
      font-size: 24px;
      font-weight: 700;
      color: #403a7a;
      margin: 0 0 30px;
    }

    &-related-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 30px;
    }

    &-loading,
    &-not-found {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 0;
    }

    &-not-found {
      text-align: center;

      &-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
        opacity: 0.6;
      }

      h2 {
        font-size: 24px;
        color: #403a7a;
        margin: 0 0 15px;
      }

      p {
        color: #666;
        margin: 0 0 20px;
      }
    }
  }
</style>
